<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'

const { y } = useWindowScroll()
</script>

<template>
  <div class="app-page">
    <img src="@/assets/a.jpg" alt="" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <img class="topimg" :class="{ show: y > 15 }" src="@/assets/b.jpg" alt="" />
</template>

<style scoped>
.topimg {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-20px);
  transition: all 0.3s;
}
.show {
  transform: translateY(0);
}
</style>
